<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2025/9/6
  Time: 下午9:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>角色管理界面</title>
</head>
<body>
    <div id="tableContainer">
        <table style="margin: 5px" class="layui-hide" id="role_list"></table>
    </div>
    <form class="layui-form" id="addRole" lay-filter="addRoleFilter" hidden="hidden">
        <input type="hidden" name="id" disabled />
        <!-- 角色编码 -->
        <div class="layui-form-item">
            <label class="layui-form-label">角色编码</label>
            <div class="layui-input-block">
                <input type="text" name="roleCode" required
                       lay-verify="required|alphaNum"
                       placeholder="请输入角色编码"
                       autocomplete="off"
                       class="layui-input">
                <div class="layui-form-mid layui-word-aux">
                    只能输入字母和数字，用于系统识别
                </div>
            </div>
        </div>

        <!-- 角色名称 -->
        <div class="layui-form-item">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-block">
                <input type="text" name="roleName" required
                       lay-verify="required"
                       placeholder="请输入角色名称"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <!-- 角色描述 -->
        <div class="layui-form-item">
            <label class="layui-form-label">角色描述</label>
            <div class="layui-input-block">
                    <textarea name="description"
                              placeholder="请输入角色描述信息"
                              class="layui-textarea"></textarea>
            </div>
        </div>

        <!-- 表单操作按钮 -->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="submitAddRole">
                    <i class="layui-icon layui-icon-ok"></i> 提交
                </button>
                <button type="reset" class="layui-btn layui-btn-primary">
                    <i class="layui-icon layui-icon-refresh"></i> 重置
                </button>
                <button type="button" class="layui-btn layui-btn-danger" id="cancelBtn">
                    <i class="layui-icon layui-icon-close"></i> 返回
                </button>
            </div>
        </div>
    </form>

</body>
</html>
<script>
    layui.use(['table','jquery','form', 'layer'], function(){
        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;

        table.render({
            elem: '#role_list'
            ,url:'/role/queryAll'
            ,toolbar: '#toolbar' //开启头部工具栏，并为其绑定左侧模板
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id', width:30, title: 'ID', sort: true}
                ,{field:'roleCode', align: 'center', title: '角色编码'}
                ,{field:'roleName', align: 'center', title: '角色名'}
                ,{field:'description', width:500, title: '描述'}
                ,{fixed: 'right', title:'操作', toolbar: '#bar', width:150}
            ]]
            ,response: {
                statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
            }
            ,parseData: function(res) { //res 即为原始返回的数据
                return{
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.length, // 这里由于不做分页，所以直接取数据长度即可，实际分页时需取 res.data.total
                    "data": res.data //解析数据列表
                }
            }
        });

        //头工具栏事件
        table.on('toolbar(role_list)', function(obj){
            switch(obj.event){
                case 'addRole':
                    $("#tableContainer").hide();
                    $("#addRole").show();
                    // 重置表单数据
                    form.val("addRoleFilter", {
                        "id": ""
                        ,"roleCode": ""
                        ,"roleName": ""
                        ,"description": ""
                    });
                    break;
            }
        });

        //监听行工具事件
        table.on('tool(role_list)', function(obj){
            var data = obj.data;
            if(obj.event === 'edit'){
                $("#tableContainer").hide();
                $("#addRole").show();
                form.val("addRoleFilter", data);
            }else if(obj.event === 'del'){
                layer.confirm('真的删除行么。强烈建议只删除测试角色', function(index) {
                    $.ajax({
                        url: "/role/delete/" + data.id,
                        type: "delete",
                        dataType: "json",
                        success: function (res) {
                            if (res.code === 200) {
                                layer.msg(res.message, {
                                    icon: 1,
                                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                                }, function () {
                                    table.reload('role_list');
                                })
                            }
                        }
                    })
                })
            }
        });

        // 取消按钮事件处理
        $("#cancelBtn").click(function () {
            $("#tableContainer").show();
            $("#addRole").hide();
        })

        // 表单提交事件
        form.on('submit(submitAddRole)', function(data) {
            $.ajax({
                url: "/role/saveOrUpdate",
                type: "post",
                data: data.field,
                dataType: "json",
                success: function (res) {
                    if (res.code === 200) {
                        layer.msg(res.message, {
                            icon: 1,
                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                        }, function () {
                            $("#tableContainer").show();
                            $("#addRole").hide();
                            table.reload('role_list');
                        })
                    }
                }
            });

            // 这里可以添加AJAX提交逻辑
            return false; // 阻止表单默认提交
        });

    });
</script>
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addRole">新增角色</button>
    </div>
</script>
<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>